表单提交时要点击两次按钮(Validform验证)才能成功的解决方法

您所在的位置:网站首页 html5 控件内容一改变 就触发 表单提交时要点击两次按钮(Validform验证)才能成功的解决方法

表单提交时要点击两次按钮(Validform验证)才能成功的解决方法

2024-07-17 03:54| 来源: 网络整理| 查看: 265

原因分析: 因为表单控件中含有ajax验证,所以在点击提交按钮时,会先执行submit,但由于此时含有ajax验证的控件还未执行验证,所以并未提交成功,然后再执行控件的blur事件对控件内容进行验证,如果验证通过,那么此时再点击一次提交按钮就会提交成功。

解决方法: 修改验证的触发事件,Validform默认的验证触发事件是blur,可以修改为在触发keyup事件时进行验证,在用户输入时即时验证,那么在点击提交按钮时就可以不用再次验证,这时就可以直接提交成功。 如下:

修改前:

html: * 短信验证码: 获取短信验证码 js: $(function () { var valid_rule = $(".form-horizontal").Validform({ datatype: {//传入自定义datatype类型,可以是正则,也可以是函数(函数内会传入一个参数); "n6": /^\d{6}$/ }, tiptype: 2 }); }); $("#txtTel").blur(function () { $("#txtTelCode").attr("ajaxurl", "/tools/validreg.ashx?regType=validCode&ctype=2&phone=" + $('#txtTel').val()); });

修改后:

html: * 短信验证码: 获取短信验证码 js: $(function () { var valid_rule = $(".form-horizontal").Validform({ datatype: {//传入自定义datatype类型,可以是正则,也可以是函数(函数内会传入一个参数); "n6": /^\d{6}$/ }, tiptype: 2 }); $("#txtTelCode").keyup(function () { var code = $(this).val(); valid_rule.addRule([{ ele: "#txtTelCode", datatype: "n6", ajaxurl: "/tools/validreg.ashx?regType=validCode&ctype=2&phone=" + $('#txtTel').val(), nullmsg: "请输入手机收到的短信验证码!", errormsg: "验证码输入有误!", sucmsg: "恭喜您,验证成功!" }]); }); });

总结:虽然使用现成的插件很简单,比如文中的validform验证,但我们不可忽略的问题是任何东西都不是完美的,在使用过程中会出现各种各样的问题。尽管插件并非我们自己所写,但我们却可以在了解它的基础上作完善,不要因为这个插件不好用,而再去找个更好用的插件,事实证明既然它受这么多人追捧是有其自身确实实用的价值。简而言之,遇到问题就要解决它,而非逃避。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3